// import Home from "../pages/Home";
const Home = () => import('@/pages/Home')


import Login from "../pages/Login";
import Register from "../pages/Register";

// import Search from "../pages/Search";
const Search =() => import('@/pages/Search')

// import Detail from "../pages/Detail";
const Detail =()=>import('@/pages/Detail')

import AddCartSuccess from "../pages/AddCartSuccess";
import ShopCart from "../pages/ShopCart";
import Pay from "../pages/Pay";
import Trade from "../pages/Trade";
import PaySuccess from '../pages/PaySuccess'
import Center from '../pages/Center'
import MyOrder from '../pages/Center/MyOrder'
import GroupOrder from '../pages/Center/GroupOrder'


// import XXX from './xxx'  叫同步引入，也叫静态引入，它不能动态引入
// 想用的时候在引入是不行的
// 同步引入必须是放在文件最上面，一上来所有的都已经引入了
// webpack在打包的时候会把所有的引入的组件统统打包，打包成一个大的文件
// 这个打包的文件越大，浏览器在加载的时候越费尽，效率会越低
// 因此，我们以后生产阶段路由组件在引入的时候都不用使用这种方式同步引入
// 而是要利用动态引入


// import('./xxx') 叫动态引入，如果我们使用这个引入方式，那么
// webpack在看到我们使用动态引入方式，会把动态引入的所有组件，单独进行打包
// 每个路由组件都会单独打包成一个小的文件
// 小的文件浏览器不会立即去加载，而是当我们访问对应的某个路由界面的时候
// 才会加载对应的小文件
// 打包的主文件变小，浏览器加载速度会快



export default [
  { path: "/", redirect: "/home" },
  {
    path: "/pay",
    component: Pay,
    //只有从交易页面（创建订单）页面才能跳转到支付页面
    beforeEnter: (to, from, next) => {
      if(from.path === '/trade'){
        next()
      }else{
         next('/')
      }
  }
  },
  {
    path: "/center",
    component: Center,
     children:[
       {
          path:'',
          redirect:'myorder'
       },
       {
         path:'myorder',
         component:MyOrder
       },
       {
         path:'grouporder',
         component:GroupOrder
       }
     ]
  },
  {
    path: "/paysuccess",
    component: PaySuccess,
    //只有从支付页面才能跳转到支付成功页面
    beforeEnter: (to, from, next) => {
      if(from.path === '/pay'){
        next()
      }else{
         next('/')
      }
  }
  },
  {
    path: "/trade",
    component: Trade,
    //路由独享守卫（只有从购物车界面才能跳转到交易页面（创建订单））
    beforeEnter: (to, from, next) => {
        if(from.path === '/shopcart'){
          next()
        }else{
           next('/')
        }
    }
  },
  {
    name: "home",
    path: "/home",
    component: Home,
    meta: {
      isShowTypeNav: true, //是否显示左侧导航
    },
  },
  {
    name: "login",
    path: "/login",
    component: Login,
    meta: {
      isShowFooter: true,
    },
  },
  {
    name: "register",
    path: "/register",
    component: Register,
    meta: {
      isShowFooter: true,
    },
  },
  {
    name: "search",
    path: "/search",
    component: Search,
  },
  {
    name: "detail",
    path: "/detail/:id",
    component: Detail,
    props: true, //props+params参数 在对应的组件中直接使用props来接收，不用计算属性了
  },
  {
    name: "addcartsuccess",
    path: "/addCartSuccess",
    component: AddCartSuccess,
    //路由独享守卫（没有登录，不能进入添加购物车成功的界面）
    //只有携带了skuNum和sessionStorage内部有skuInfo数据 
    beforeEnter: (to, from, next) => {
         let skuNum = to.query.skuNum;
         let skuInfo = sessionStorage.getItem('skuInfo_key')
          if(skuNum && skuInfo){
             next()
          }else{
             next('/')
          }
    }
  },
  {
    name: "shopcart",
    path: "/shopcart",
    component: ShopCart,
  },
  {
    path: '/communication',
    component: () => import('@/pages/Communication/Communication'),
    children: [
      {
        path: 'event',
        component: () => import('@/pages/Communication/EventTest/EventTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'model',
        component: () => import('@/pages/Communication/ModelTest/ModelTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'sync',
        component: () => import('@/pages/Communication/SyncTest/SyncTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'attrs-listeners',
        component: () => import('@/pages/Communication/AttrsListenersTest/AttrsListenersTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'children-parent',
        component: () => import('@/pages/Communication/ChildrenParentTest/ChildrenParentTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'scope-slot',
        component: () => import('@/pages/Communication/ScopeSlotTest/ScopeSlotTest'),
        meta: {
          isHideFooter: true
        },
      }
    ],
  },
  {  //url地址栏输入路径如果都匹配不到，那么重定向到home
    path:'*',
    redirect:'/'
  }
  // props配置是简化操作传递过去的路由参数
  // 三种
  // 布尔
  // props:true,  会把路由传递的params参数映射为组件内部的属性
  // 对象
  // props:{username:'赵丽颖'} 会把对象内部的属性映射为组件内部的属性，一般用来传递一个额外的数据
  // 函数
  // 可以手动的去映射params或者query参数。
  // props(route){
  //   return {keyword:route.params.keyword,category1Id:route.query.category1Id}
  // }
];
